<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <h3 class="app-page-h3-title">
        rs-transform变幻
      </h3>
      <div class="app-section clearfix">
        <h1>平移：translate(), translateX(), translateY()</h1>
        <ul class="res-transform">
          <li class="translate">
            <p>transform:translate(10px,10px)</p>
          </li>
          <li class="translate2">
            <p>transform:translate(-10px,-10px)</p>
          </li>
          <li class="translateX">
            <p>transform:translateX(20px)</p>
          </li>
          <li class="translate3">
            <p>transform:translate(20px)</p>
          </li>
          <li class="translateY">
            <p>transform:translateY(10px)</p>
          </li>
          <li class="translate4">
            <p>transform:translate(0,10px)</p>
          </li>
        </ul>
        <h1>旋转：rotate()</h1>
        <ul class="res-transform">
          <li class="rotate">
            <p>transform:rotate(-15deg)</p>
          </li>
          <li class="rotate2">
            <p>transform:rotate(15deg)</p>
          </li>
        </ul>
        <h1>缩放：scale()</h1>
        <ul class="res-transform">
          <li class="scale">
            <p>transform:scale(.8)</p>
          </li>
          <li class="scale2">
            <p>transform:scale(1.2)</p>
          </li>
        </ul>
        <h1>扭曲：skew()</h1>
        <ul class="res-transform">
          <li class="skew">
            <p>transform:skew(-5deg)</p>
          </li>
          <li class="skew2">
            <p>transform:skew(-5deg,-5deg)</p>
          </li>
        </ul>
      </div>
      <div class="app-section">
        <!-- bidirectional data binding（双向数据绑定） -->
        <codemirror v-model="code" :options="cmOptions"></codemirror>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StyleButton',
  data () {
    return {
      code: `
/*
none： 无转换
matrix(<number>,<number>,<number>,<number>,<number>,<number>)： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX(<length>)： 指定对象X轴（水平方向）的平移
translateY(<length>)： 指定对象Y轴（垂直方向）的平移
rotate(<angle>)： 指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale(<number>[, <number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)： 指定对象X轴的（水平方向）缩放
scaleY(<number>)： 指定对象Y轴的（垂直方向）缩放
skew(<angle> [, <angle>])： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>)： 指定对象X轴的（水平方向）扭曲
skewY(<angle>)： 指定对象Y轴的（垂直方向）扭曲
 */
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
/*
none： 无转换
matrix(<number>,<number>,<number>,<number>,<number>,<number>)： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX(<length>)： 指定对象X轴（水平方向）的平移
translateY(<length>)： 指定对象Y轴（垂直方向）的平移
rotate(<angle>)： 指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale(<number>[, <number>])： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)： 指定对象X轴的（水平方向）缩放
scaleY(<number>)： 指定对象Y轴的（垂直方向）缩放
skew(<angle> [, <angle>])： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>)： 指定对象X轴的（水平方向）扭曲
skewY(<angle>)： 指定对象Y轴的（垂直方向）扭曲
 */
h1 {
  clear: both;
  padding-top: 10px;
  font-size: 16px;
  font-family: Arial;
}
.res-transform {
  width: 700px;
  list-style: none;
}
.res-transform li {
  float: left;
  margin: 20px 30px 0 0;
  border: 1px solid #000;
}
.res-transform li p {
  width: 300px;
  height: 100px;
  margin: 0;
  background: #ddd;
}
.res-transform .matrix p {
  transform: matrix(1, 0, 0, 1, 10, 10);
  transform-origin: left top;
}
.res-transform .translate p {
  transform: translate(10px, 10px);
}
.res-transform .translate2 p {
  transform: translate(-10px, -10px);
}
.res-transform .translateX p {
  transform: translateX(20px);
}
.res-transform .translate3 p {
  transform: translate(20px);
}
.res-transform .translateY p {
  transform: translateY(10px);
}
.res-transform .translate4 p {
  transform: translate(0, 10px);
}
.res-transform .rotate {
  transform: rotate(5deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
.res-transform .rotate2 {
  transform: rotate(-5deg);
  transform-origin: right top;
}
.res-transform .scale {
  transform: scale(0.8);
}
.res-transform .scale2 {
  transform: scale(1.2);
}
.res-transform .skew {
  transform: skew(-5deg);
}
.res-transform .skew2 {
  transform: skew(-5deg, -5deg);
}
</style>
